<template>
<!-- 右上角头像 -->
  <div v-if="headimg" class="Avatar">
    <div>
      <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
    </div>
    <div>{{headimg}}</div>
    <div class="bottombtn" @click="bottombtn">注销</div>
  </div>
</template>

<script>
import {useStore} from 'vuex'
import {ref} from 'vue'
export default {
  setup(){
    const store=useStore()
    const headimg=ref(store.state.Userinformation.usercneter.nickname)
    const bottombtn=()=>{
      store.commit('bottombtn')
      headimg.value=store.state.Userinformation.usercneter.nickname
    }
    return{
      headimg,
      bottombtn
    }
  }
};
</script>

<style>
.Avatar {
  z-index: 999;
  position: fixed;
  top: 0px;
  right: 5px;
  display: flex;
  width: 120px;
  transition: all 0,5s linear 1s;
}
.Avatar>:nth-child(2){
    margin-left: 5px;
    color: white;
    line-height: 40px;
    cursor: pointer;
}
.Avatar:hover .bottombtn{
  display: block;
}
.bottombtn{
  display: none;
  position: fixed;
  top: 40px;
  height: 30px;
  width: 100px;
  text-align: center;
  cursor: pointer;
  background: #333;
  color: aliceblue;
}
</style>